<?php
    session_start();
    include("includes/connect_db.php");
    include("includes/function.php");
?>

<style>
    div{
        font-family: 'SEGOE UI';
    }

    .table{
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
    }

    #form-modal{
        max-height: 800px;
    }

    .over{
        border: 1px solid #DDD;
        max-height: 500px;
        overflow: auto;
    }
    .tandaSemua{
        color: #08c;
        cursor: pointer;
    }
</style>

<div id="form-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="background-color: #0088cc; height: 40px; color: #FFF; text-shadow: none; font-family: 'SEGOE UI'">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i></button>
        <h3 id="myModalLabel">
            Pilih Kontak
        </h3>
    </div>
    <div class="modal-body">
        <div class="over">
        <table class="table">
            <?php
                $sql_cari_kontak = "SELECT * FROM tb_kontak";
                $query_cari_kontak = mysql_query($sql_cari_kontak);

                while ($cari_kontak = mysql_fetch_array($query_cari_kontak)) {
            ?>

            <tr>
                <td>
                    <input type="hidden" class="namaHide" value="<?php echo $cari_kontak['nama_kontak']?>">
                    <input type="hidden" class="nomorHide" value="<?php echo $cari_kontak['no_hp']?>">
                    <input class="check-real" type="checkbox" name="pilih" value="<?php echo $cari_kontak['id_kontak']?>" style="display:none">
                    <i class="icon-check check" style="opacity:0.2"></i>
                </td>
                <td>
                    <img style="height: 30px;" src="<?php echo cekGambar($cari_kontak['id_kontak'], 1, 3); ?>">
                    <?php echo $cari_kontak['nama_kontak']?>
                </td>
                <td>
                    <?php echo $cari_kontak['no_hp']?>
                </td>
            </tr>

            <?php
                }

                $sql_cari_group = "SELECT * FROM tb_group_kontak";
                $query_cari_group = mysql_query($sql_cari_group);

                while ($cari_group = mysql_fetch_array($query_cari_group)) {
            ?>

            <tr>
                <td>
                    <input type="hidden" class="namaHide" value="<?php echo $cari_group['nama_group']?>">
                    <input class="check-real" type="checkbox" name="pilih" value="<?php echo $cari_group['id_group']?>" style="display:none">
                    <i class="icon-check check" style="opacity:0.2"></i>
                </td>
                <td>
                    <img style="height: 30px;" src="<?php echo cekGambar($cari_group['id_group'], 2, 3); ?>">
                    <?php echo $cari_group['nama_group']?>
                </td>
                <td>
                    <img style="width: 30px; height: 30px;" src="img/group-icon.png">
                </td>
            </tr>

            <?php
                }
            ?>
        </table>
    </div>
    </div>
    <div class="modal-footer">
        <span class="tandaSemua" class="pull-right" style="opacity:0.2">
            <input class="check-real-all" type="checkbox" style="display: none">
            <i class="icon-check check-all"></i>
            Tandai Semua
        </span>
        <button type="submit" style="width: 80px;" class="btn btn-info" name="pilih" id="btnPilih">Pilih</button>
    </div>
</div>


<script type="text/javascript">
    var cek = 0;
    var tempView = '';

    function cekKontak() {
        $('.namaHide').each(function(){
            var namaTemp = $(this).val();
            var tempPlacer = $(this);
            tempPlacer.parent('td').find('.check-real').removeAttr('checked');
            tempPlacer.parent('td').find('.check').css('opacity','0.2');
            tempPlacer.parent('td').parent('tr').css('color','');
            tempPlacer.parent('td').parent('tr').css('background-color', '#FFF');
            for (var i = 0; i < namaArr.length; i++) {
                if(namaArr[i] == namaTemp){
                    tempPlacer.parent('td').find('.check-real').attr('checked','checked');
                    tempPlacer.parent('td').find('.check').css('opacity','1');
                    tempPlacer.parent('td').parent('tr').css('warning');
                    tempPlacer.parent('td').parent('tr').css('color','');
                    tempPlacer.parent('td').parent('tr').css('background-color', '#ddd');
                }
            };
        });
        if(namaArr.length==$('.check').length){
            $('.tandaSemua').css('opacity','1');
            $('.check-real-all').attr('checked','checked');
        } else{
            $('.tandaSemua').css('opacity','0.2');
            $('.check-real-all').removeAttr('checked');
        }
    }

    $(document).ready(function(){
        $('#form-modal').modal('show');

        $('.check').on('click',function(){
            if($(this).parent('td').find('.check-real').is(':checked')){
                cek--;
                $(this).parent('td').find('.check-real').removeAttr('checked');
                $(this).css('opacity','0.2');
                $(this).parent('td').parent('tr').css('background-color', '#FFF');
                $(this).parent('td').parent('tr').css('color','');

                indexText = coba.values.indexOf($(this).parent('td').find('.namaHide').val());
                console.log(indexText);
                if(indexText>=0){
                    coba.values.splice(indexText, 1);
                    coba.element.siblings('.tag:eq(' + indexText + ')').remove();
                    coba.element.val(coba.values.join(', '));
                    console.log(coba);
                }

                var namaHide = $(this).parent('td').find('.namaHide').val();
                var index = namaArr.indexOf(namaHide);
                nomorArr.splice(index, 1);
                namaArr.splice(index, 1);
            }else{
                cek++;
                $(this).parent('td').find('.check-real').attr('checked','checked');
                $(this).css('opacity','1');
                $(this).parent('td').parent('tr').css('background-color', '#ddd');
                $(this).parent('td').parent('tr').css('color','');
                var nomorHide = $(this).parent('td').find('.nomorHide').val();
                var namaHide = $(this).parent('td').find('.namaHide').val();
                console.log(namaHide);
                nomorArr.push(nomorHide);
                namaArr.push(namaHide);
            }

            if(namaArr.length==$('.check').length){
                $('.tandaSemua').css('opacity','1');
                $('.check-real-all').attr('checked','checked');
            } else{
                $('.tandaSemua').css('opacity','0.2');
                $('.check-real-all').removeAttr('checked');
            }
            // console.log(personArr);
        });

        $('.tandaSemua').click(function(){
            var cekCentang = $(this).find('.check-real-all');
            if(cekCentang.is(':checked')){
                $('.check').each(function(){
                    var temp = $(this);
                    if($(this).parent('td').find('.check-real').is(':checked')){    
                        temp.click();
                    }
                });
                cekCentang.removeAttr('checked');
                $(this).css('opacity','0.2');
            }else{
                $('.check').each(function(){
                    var temp = $(this);
                    if(!$(this).parent('td').find('.check-real').is(':checked')){   
                        temp.click();
                    }
                });
                cekCentang.attr('checked','checked');
                $(this).css('opacity','1');
            }
        });
            
        $('.check-all').live({
            mouseenter:
               function()
               {
                    $(this).css('opacity','1');
               },
            mouseleave:
               function()
               {
                    if(!$(this).parent('span').find('.check-real-all').is(':checked')){
                        $(this).css('opacity','0.2');
                    }       
               }
           }
        );

        $('.check').on({
            mouseenter:
               function()
               {
                    $(this).css('opacity','1');
               },
            mouseleave:
               function()
               {
                    if(!$(this).parent('td').find('.check-real').is(':checked')){
                        $(this).css('opacity','0.2');
                    }       
               }
           }
        );

        $('#form-modal').on('hidden', function(){
            $('#text-nama').val(namaArr);
            $('#text-nama').focus().blur();
            if($("#penerima-hide").val()!=""){
                x = $("#penerima-hide").val().split(',')
            }
        });

        $('#btnPilih').on('click', function(){
            $('#form-modal').modal('hide');
        });
    });
</script>